<script setup lang="ts">
import { useCategoryStore } from "@/stores/categoryStore";
import XtxBread from "../../../components/XtxBread.vue";
import XtxBreadItem from "../../../components/XtxBreadItem.vue";

// 获取用于存储分类数据的 store 对象
const categoryStore = useCategoryStore();
const route = useRoute();

const target = computed(() =>
  categoryStore.currentTopAndSub(
    route.params.top as string,
    route.params.sub as string
  )
);
</script>
<template>
  <XtxBread>
    <XtxBreadItem path="/">首页</XtxBreadItem>
    <XtxBreadItem :path="`/category/${target.topCategory?.id}`">{{
      target.topCategory?.name
    }}</XtxBreadItem>
    <Transition name="fade-right" mode="out-in">
      <XtxBreadItem :key="target.subCategory?.id">{{
        target.subCategory?.name
      }}</XtxBreadItem>
    </Transition>
  </XtxBread>
</template>
